<template>
  <div class="home-view">
    <div class="hero">
      <h1>JDFSight</h1>
      <p>高效的JDF结构可视化和编辑工具</p>

      <div class="upload-area">
        <el-upload
            drag
            action="#"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="handleFileChange"
            accept=".jdf,.xml"
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            拖拽JDF文件到此处或<em>点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              支持JDF和XML文件格式
            </div>
          </template>
        </el-upload>
      </div>

      <div class="buttons">
        <el-button type="primary" @click="goToEditor">进入编辑器</el-button>
        <el-button @click="goToVisualizer">查看可视化</el-button>
      </div>
    </div>

    <div class="features">
      <div class="feature-card">
        <el-icon size="32"><EditPen /></el-icon>
        <h3>高级编辑器</h3>
        <p>基于Monaco Editor的强大编辑体验，支持语法高亮和格式化</p>
      </div>

      <div class="feature-card">
        <el-icon size="32"><View /></el-icon>
        <h3>交互式可视化</h3>
        <p>使用VueFlow提供直观的节点关系图，轻松理解复杂JDF结构</p>
      </div>

      <div class="feature-card">
        <el-icon size="32"><MoonNight /></el-icon>
        <h3>暗黑模式</h3>
        <p>支持亮/暗两种主题，保护您的眼睛</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useEditorStore } from '@/stores/editorStore.ts'
import { useFileManagerStore } from '@/stores/fileManagerStore.ts'
import { UploadFilled, EditPen, View, MoonNight } from '@element-plus/icons-vue'
import { ElMessage, ElUpload, type UploadFile, type UploadRawFile } from 'element-plus'
import { onMounted } from 'vue'

const router = useRouter()
const editorStore = useEditorStore()
const fileManagerStore = useFileManagerStore()

const handleFileChange = async (uploadFile: UploadFile, uploadFiles: UploadFile[]) => {
  if (uploadFile.raw) {
    try {
      ElMessage.info(`正在处理文件 ${uploadFile.raw.name}...`)
      await fileManagerStore.saveNewFileFromUpload(uploadFile.raw)

    } catch (error: any) {
      console.error("Error handling file upload in HomeView:", error)
    }
  }
}

const goToEditor = () => {
  router.push('/editor')
}

const goToVisualizer = () => {
  router.push('/visualizer')
}

/* Comment out unused function causing linter error
const createNewFile = async () => {
  try {
    ElMessage.info('正在创建新文件...')
    const newFileMeta = await fileManagerStore.createNewEmptyFile()
    if (newFileMeta && newFileMeta.uuid) {
      await fileManagerStore.loadFileIntoEditor(newFileMeta.uuid)
      router.push({ name: 'Editor' })
    } else {
      // Error message handled by createNewEmptyFile
    }
  } catch (error: any) {
    console.error("Error creating new file in HomeView:", error)
    // Error message handled by store action
  }
}
*/

onMounted(() => {
  console.log('[HomeView] Component mounted.');
});
</script>

<style lang="scss" scoped>
.home-view {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;

  .hero {
    text-align: center;
    padding: 40px 0;

    h1 {
      font-size: 3rem;
      margin-bottom: 10px;
      background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    p {
      font-size: 1.2rem;
      margin-bottom: 30px;
      color: var(--el-text-color-secondary);
    }

    .upload-area {
      max-width: 500px;
      margin: 30px auto;
    }

    .buttons {
      display: flex;
      gap: 15px;
      justify-content: center;
      margin-top: 20px;
    }
  }

  .features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 40px;

    .feature-card {
      padding: 20px;
      border-radius: 8px;
      background-color: var(--el-bg-color-overlay);
      border: 1px solid var(--el-border-color);
      text-align: center;

      h3 {
        margin: 15px 0;
      }

      p {
        color: var(--el-text-color-secondary);
      }
    }
  }
}
</style>